<template>
  <el-card class="roleMain-card">
    <template #header>
      <div class="card-header">
        <span>角色列表</span>
        <el-button plain @click="handleNew"> 新增 </el-button>
      </div>
    </template>

    <el-table v-loading="loading" :data="roles" stripe style="width: 100%" empty-text="暂无数据">
      <el-table-column prop="id" label="#" width="60" />
      <el-table-column prop="rname" label="姓名" width="100" />
      <el-table-column prop="nbl" label="角色状态" width="90" />
      <el-table-column label="角色状态" width="90">
        <template #default="scope">
          <el-switch
            v-model="scope.row.nbl"
            :active-value="1"
            :inactive-value="0"
            @click="handleNblSwitch(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="说明" width="300" />
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            circle
            :icon="Edit"
            :disabled="!scope.row.nbl"
            @click="handleEdit(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            size="small"
            :icon="Delete"
            :disabled="!scope.row.nbl"
            type="danger"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            :icon="Key"
            type="danger"
            :disabled="!scope.row.nbl"
            @click="showTree(scope.$index, scope.row)"
          >
            角色授权
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 弹出式对话框 -->
  <el-dialog v-model="dialogFormVisible" width="500">
    <!-- 自定义头部 -->
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">编辑角色信息</h4>
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </div>
    </template>
    <!-- 对话框内容 -->
    <el-form :model="form">
      <el-form-item label="角色编号" :label-width="formLabelWidth">
        <el-input readonly v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-input clearable v-model="form.rname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input type="textarea" rows="5" clearable v-model="form.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false" :icon="CloseBold"> 取消 </el-button>
        <el-button type="primary" :icon="Promotion" @click="savedata"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="confirmDialog" title="Warn" width="400" :before-close="closeConfirm">
    <span>确认删除？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeConfirm">取消</el-button>
        <el-button type="primary" @click="confirmDelete"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  角色抽屉  -->

  <el-drawer v-model="drawerVisible" :direction="direction">
    <template #header>
      <h1>系统功能树</h1>
    </template>
    <template #default>
      <div>
        <!-- 系统功能树展示区域 -->
        <el-tree
          ref="treeRef"
          node-key="id"
          default-expand-all
          style="max-width: 600px"
          :data="treeData"
          :props="defaultProps"
          highlight-current
          show-checkbox
        />
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus, Promotion, CloseBold, Delete, Edit, Key } from '@element-plus/icons-vue'
import { alertMsg, alertCode, confirm } from '@/utils/msg.js'
import { ElButton, ElDialog, ElMessageBox } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoles } from '@/stores/nepm/role.js'
import { storeToRefs } from 'pinia'

const roleStore = useRoles()
const { roles, msg, dialogFormVisible, form, treeData, drawerVisible, confirmDialog } =
  storeToRefs(roleStore)

const handleNblSwitch = (index, row) => {
  roleStore.handleNblSwitch(index, row)
  alertCode(200)
}

const treeRef = ref(null)

const handleNew = () => {
  roleStore.handleAdd()
}

onMounted(() => {
  roleStore.loadData()
  loadtree()
})

const handleEdit = (index, row) => {
  roleStore.handleEdit(index, row)
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm('确定删除这条数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      confirmDelete(index, row)
      console.log('done!')
    })
    .catch(() => {
      console.log('cancel')
      closeConfirm()
    })
}

const savedata = async () => {
  roleStore.save()
}

const confirmClick = () => {
  const checkedNodeIds = treeRef.value.getCheckedKeys(false)
  const halfCheckedNodeIds = treeRef.value.getHalfCheckedKeys()
  const sids = [...checkedNodeIds, ...halfCheckedNodeIds]

  roleStore.confirmClick(sids)
}

const cancelClick = () => {
  roleStore.closeDrawer()
}

const openConfirm = () => {
  roleStore.openConfirm()
}

const closeConfirm = () => {
  roleStore.closeConfirm()
}

const confirmDelete = (index, row) => {
  roleStore.confirmDelete(index, row)
  closeConfirm()
}
const showTree = async (index, row) => {
  roleStore.showTree()
  const v = await roleStore.setCheckedKeys(row)
  treeRef.value.setCheckedNodes(
    v.map((node) => {
      return { id: node }
    }),
    false
  )

  console.log(treeRef.value)
}

const loadtree = () => {
  roleStore.loadTree()
}

const defaultProps = {
  children: 'children',
  label: 'title'
}
</script>

<style lang="scss" scoped>
.roleMain-card {
  width: 100%;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
